import { PentestGPTContext } from '@/context/context';
import type { ContentType } from '@/types';
import { type FC, useContext } from 'react';
import { SIDEBAR_WIDTH } from '../ui/dashboard';
import { TabsContent } from '../ui/tabs';
import { SidebarContent } from './sidebar-content';

interface SidebarProps {
  contentType: ContentType;
  showSidebar: boolean;
}

export const Sidebar: FC<SidebarProps> = ({ contentType, showSidebar }) => {
  const { chats } = useContext(PentestGPTContext);

  const renderSidebarContent = (contentType: ContentType, data: any[]) => {
    return <SidebarContent contentType={contentType} data={data} />;
  };

  return (
    <TabsContent
      className="m-0 w-full space-y-2"
      style={{
        // Sidebar - SidebarSwitcher
        minWidth: showSidebar ? `calc(${SIDEBAR_WIDTH}px)` : '0px',
        maxWidth: showSidebar ? `calc(${SIDEBAR_WIDTH}px)` : '0px',
        width: showSidebar ? `calc(${SIDEBAR_WIDTH}px)` : '0px',
      }}
      value={contentType}
    >
      <div className="flex h-full flex-col p-3">
        {(() => {
          switch (contentType) {
            case 'chats':
              return renderSidebarContent('chats', chats);

            default:
              return null;
          }
        })()}
      </div>
    </TabsContent>
  );
};
